<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <script>
    
    
    
    //    var div=document.querySelector("div");

    //    div.addEventListener("click",clickHandler);

    //     function clickHandler(e){

    //     }


        // 这种书写方式代替div.onclick=function() ，clickHandler函数称为点击事件函数
        // var div=document.querySelector("div");以这种方式获取元素
// ------------------------------------------------------------------------------------------------
        // document.body//body标签
        // document.title//title标签
        // document.head//head标签
        // document.documentElement//html标签
        // document//是整个文档
        // document.URL//和location.href相同，表示当前的地址
        // document.domain//域名

        // console.log(document.styleSheets);//每个stylesheet都是css样式，当中有rules样式，在rules里有css样式
        // 在style里的数据存放在rules当中

// --------------------------------------------------------------------------------
        
        // div.parentElement//父元素
        // div.parentNode//父节点

        // div.children//子元素 html标签
        // div.childNodes//子节点

        // div.firstChild //第一个子节点
        // div.firstElementChild//第一个子元素

        // div.lastChild//最后一个子节点
        // div.lastElementChild//最后一个子元素

        // div.previousSibling//向上一个兄弟节点
        // div.previousElementSibling//向上一个兄弟元素

        // div.nextSibling//向下一个兄弟节点
        // div.nextElementSibling//向下一个兄弟元素
// ---------========================================================================================
        // var elem= document.createElement("")//创建元素，将标签直接写在页面中

        // var txtNode=document.createTextNode("文本节点");//创建文本节点

        // var elem=document.createDocumentFragment();//创建文档碎片容器

        // div.txtContent  //获取设置元素的文本节点

        // parent.insertBefore(元素,要放置的位置后元素)//插入节点

        // parent.appendChild(元素) //插入到节点的尾部 

        // node.cloneNode(false) //浅复制
        // node.cloneNode(true) //深复制

        // elem.remove();//自己删除自己
        // parent.removeChild(elem);//通过父元素删除子元素


        // parent.replaceChild(元素，被替换的元素)//替换元素   父元素.replaceChild(新元素，被替换的元素)

// --------------------------------------------------------------------------

// 元素就是HTML标签，不包含注释、换行、文档

    // HTMLDivElement-->HTMLElement-->Element-->Node-->EventTarget-->Object
        // 除了document所有的标签都是这个演化规律
        // HTMLDocument-->Document-->Node-->EventTarget-->Object



// 标签类别的判断：

        // 1-通过nodename判断    元素名.nodename === "元素名"
        // 2-通过construtor判断    元素名.constrctor === "HTNL元素名Element"


        // var elem=document.createDocumentFragment();//文档碎片容器

        // for(var i=0;i<100;i++){
        //     var div=document.createElement("div");
        //     elem.appendChild(div);
        // }

        // document.body.appendChild(elem);

        // 将所需创建的内容放置在容器中，一次性放在页面中，一次重绘就行


        // var img=document.createElement("img");
        // var img = new Image();
        // 两种方法都可以创建图片
   
   
   
        // 将某个元素添加在父元素里面的尾部
        // 父元素.appendChild(子元素)
      
   
        // var div=document.createElement("div");
        // document.body.insertBefore(div,document.body.firstChild);
        //  将div插入在body里的第一个节点      
   

//         新元素=原元素.cloneNode(false) 可以复制原标签的所有属性和样式，不包含内容和后代元素
//         新元素=原元素.cloneNode(true)      深复制，可以将内容和后代一起复制  
//       深复制后将id也复制了，id具有唯一性，需要重新定义id
   
   
   
        // console.log(div1.textContent);//所有文本节点及其后代的所有文本节点 设置的是文本
        // div1.textContent="abc";//将div1中的所有元素替换为这个abc的文本节点
        // 区别：innerHtML可以获取 当前元素和后代所有文本和节点，设置的是HTNL       
   
   
            
        // 创建文本节点：
        // var txtNode=document.createTextNode("asdwqeqwe");
        // div1.insertBefore(txtNode,div1.firstChild);
    
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   </script>
</body>
</html>